<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import TestChart from "./components/test.vue";
import { delayCheck } from "@/api";
import dayjs from "dayjs";

const data1 = ref([]);
const data2 = ref([]);
const data3 = ref([]);
const data4 = ref([]);
const data5 = ref([]);
const data6 = ref([]);
const data7 = ref([]);
const timeData = ref([]);

const timer = ref(null);
const maxBarCount = ref(6); //最大显示条数

const fetchData = async () => {
  try {
    const { data } = await delayCheck();
    const time = dayjs(data.result.time).format("HH:mm:ss");
    const newValue1 = Number(data.result["打非治违"]);
    const newValue2 = Number(data.result["数字港航"]);
    const newValue3 = Number(data.result["渝你同行"]);
    const newValue4 = Number(data.result["渝路智管"]);
    const newValue5 = Number(data.result["渝运安"]);
    const newValue6 = Number(data.result["轨道智管"]);
    const newValue7 = Number(data.result["高速畅行"]);

    timeData.value = [...timeData.value, time].slice(-maxBarCount.value);
    data1.value = [...data1.value, newValue1].slice(-maxBarCount.value);
    data2.value = [...data2.value, newValue2].slice(-maxBarCount.value);
    data3.value = [...data3.value, newValue3].slice(-maxBarCount.value);
    data4.value = [...data4.value, newValue4].slice(-maxBarCount.value);
    data5.value = [...data5.value, newValue5].slice(-maxBarCount.value);
    data6.value = [...data6.value, newValue6].slice(-maxBarCount.value);
    data7.value = [...data7.value, newValue7].slice(-maxBarCount.value);
  } catch (error) {
    console.error("获取数据失败:", error);
  }
};

// 定时更新
const startInterval = () => {
  timer.value = setInterval(fetchData, 500);
};

onMounted(() => {
  fetchData();
  startInterval();
});

onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value);
  }
});
</script>

<template>
  <div class="test-index">
    <test-chart
      :data="data1"
      :time-data="timeData"
      :max-value="60"
      :bar-width="20"
      width="50%"
      height="95px"
      title="打非治违"
    />
    <test-chart
      :data="data2"
      :time-data="timeData"
      :max-value="60"
      :bar-width="20"
      width="50%"
      height="95px"
      title="数字港航"
    />
    <test-chart
      :data="data3"
      :time-data="timeData"
      :max-value="60"
      :bar-width="20"
      width="50%"
      height="95px"
      title="渝你同行"
    />
    <test-chart
      :data="data4"
      :time-data="timeData"
      :max-value="60"
      :bar-width="20"
      width="50%"
      height="95px"
      title="渝路智管"
    />
    <test-chart
      :data="data5"
      :time-data="timeData"
      :max-value="60"
      :bar-width="20"
      width="50%"
      height="95px"
      title="渝运安"
    />
    <test-chart
      :data="data6"
      :time-data="timeData"
      :max-value="60"
      :bar-width="20"
      width="50%"
      height="95px"
      title="轨道智管"
    />
    <test-chart
      :data="data7"
      :time-data="timeData"
      :max-value="60"
      :bar-width="20"
      width="50%"
      height="95px"
      title="高速畅行"
    />
  </div>
</template>

<style scoped lang="scss">
.test-index {
  width: 640px;
  height: 395px;
  display: flex;
  flex-wrap: wrap;
  background-color: #3d0e2a;
}
</style>
